<template>
  <div class="myTask-wraper">
    <div class="notice toggle-class">
      <el-card class="box-card">
        <div slot="header" class="clearfix header">
          <div class="tip">
            <i
              class="el-icon-position"
              style="color: #fa412d; font-size: 16px"
            ></i>
            <span class="title">任务通知</span>
            <!-- <span class="suffix">({{ pendingTaskList.length }})</span> -->
          </div>
          <el-button
            type="text"
            @click="toggleTaskStatus(1)"
            :class="{ active: 1 === taskIndex }"
            >待办</el-button
          >
          <div v-if="taskNum && taskNum > 0" class="toggleNums">{{ taskNum }}</div>
          <el-button
            type="text"
            @click="toggleTaskStatus(2)"
            :class="{ active: 2 === taskIndex }"
            >已办</el-button
          >
          <el-button type="text" class="more" @click="linkToPendingTask"
            >更多</el-button
          >
        </div>
        <div class="main" v-show="taskIndex === 1">
          <div class="tip no-content" v-if="!pendingTaskList.length">
            暂无任务
          </div>
          <ul>
            <li v-for="(item, index) in pendingTaskList" :key="index">
              <div class="content" @click="linkToReport(item)">
                <el-tag
                  v-if="item.variables.emergency"
                  size="small"
                  :type="item.variables.emergency | tagType"
                  >{{ item.variables.emergency }}</el-tag
                >
                <span class="desc textOverflow">{{
                  item.variables.bussName
                }}</span>
                <!-- <div class="content" @click="linkToReport(item.id)">
                    <el-tag v-if="item.emergency_level" size="small" :type="item.emergency_level | tagType">{{ item.emergency_level }}</el-tag>
                    <span class="desc">{{ item.title }}</span> -->
              </div>
              <span class="date">{{ item.time }}</span>
            </li>
          </ul>
        </div>
        <div class="main" v-show="taskIndex === 2">
          <div class="tip no-content" v-if="!handTaskList.length">暂无任务</div>
          <ul>
            <li v-for="(item, index) in handTaskList" :key="index">
              <div class="content" @click="linkToPreview(item)">
                <el-tag
                  size="small"
                  :type="item.variables.emergency | tagType"
                  >{{ item.variables.emergency }}</el-tag
                >
                <span class="desc textOverflow">{{
                  item.variables.bussName
                }}</span>
                <!-- <div class="content" @click="linkToReport(item.id)">
                  <el-tag size="small" :type="item.emergency_level | tagType">{{ item.emergency_level }}</el-tag>
                  <span class="desc">{{ item.title }}</span> -->
              </div>
              <span class="date">{{ item.time }}</span>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
    <div class="notice toggle-class-copy">
      <el-card class="box-card">
        <div slot="header" class="clearfix header">
          <div class="tip">
            <i
              class="el-icon-position"
              style="color: #fa412d; font-size: 16px"
            ></i>
            <span class="title">审批通知</span>
          </div>
          <el-button
            type="text"
            @click="toggleApprovalStatus(3)"
            :class="{ active: 3 === noticeIndex }"
            >待办</el-button
          >
          <div v-if="apprNum && apprNum > 0" class="toggleNums">{{ apprNum }}</div>
          <el-button
            type="text"
            @click="toggleApprovalStatus(4)"
            :class="{ active: 4 === noticeIndex }"
            >已办</el-button
          >
          <el-button type="text" class="more" @click="linkToApproveList"
            >更多</el-button
          >
        </div>
        <div class="main" v-show="noticeIndex === 3">
          <div v-if="!penddingProcessList.length" class="tip no-content">
            暂无审批
          </div>
          <ul>
            <li
              v-for="(item, index) in penddingProcessList"
              :key="index"
              @click="linkToHandler(item)"
            >
              <div class="content">
                <!-- <el-tag size="small" type="danger">特急</el-tag> -->
                <span class="textOverflow"> {{ item.variables.bussName }}</span>
              </div>
              <span class="date">{{ item.time }}</span>
            </li>
          </ul>
        </div>
        <div class="main" v-show="noticeIndex === 4">
          <div v-if="!hasProcessList.length" class="tip no-content">
            暂无审批
          </div>
          <ul>
            <li
              v-for="(item, index) in hasProcessList"
              :key="index"
              @click="linkToHasHandler(item)"
            >
              <div class="content">
                <!-- <el-tag size="small" type="danger">特急</el-tag> -->
                <span class="textOverflow"> {{ item.bussName }}</span>
              </div>
              <span class="date">{{ item.time }}</span>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
    <div class="notice">
      <el-card class="box-card">
        <div slot="header" class="clearfix header">
          <div class="tip">
            <i
              class="el-icon-position"
              style="color: #fa412d; font-size: 16px"
            ></i>
            <span class="title">公告通知</span>
            <span class="suffix"></span>
          </div>
          <el-button
            type="text"
            class="more"
            @click="$router.push('/task-center/infomationLetterList')"
            >更多</el-button
          >
        </div>
        <div class="main">
          <div v-if="!informationLetterList.length" class="tip no-content">
            暂无公告通知
          </div>
          <ul v-else>
            <li v-for="(item, index) in informationLetterList" :key="index">
              <div class="content">
                <!-- <el-tag size="small" type="danger">特急</el-tag> -->
                <span class="textOverflow" @click="previewFileAppendPath(item,0,false,true)">
                  {{ item.filename }}</span
                >
              </div>
              <span class="date">{{ item.time }}</span>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
    <div class="notice">
      <el-card class="box-card">
        <div slot="header" class="clearfix header">
          <div class="tip">
            <i
              class="el-icon-position"
              style="color: #fa412d; font-size: 16px"
            ></i>
            <span class="title">收文通知</span>
          </div>
          <el-button
            type="text"
            class="more"
            @click="$router.push('/task-center/receivePageList')"
            >更多</el-button
          >
        </div>
        <div class="main">
          <div v-if="!receivePagerList.length" class="tip no-content">
            暂无收文
          </div>
          <ul v-else>
            <li
              v-for="(item, index) in receivePagerList"
              :key="index"
              @click="linkToRecevie(item)"
            >
              <div class="content">
                <!-- <el-tag size="small" type="danger">特急</el-tag> -->
                <span class="textOverflow"> {{ item.variables.bussName }}</span>
              </div>
              <span class="date">{{ item.time }}</span>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { TaskIng, getCandite, getHasApproves } from "@/api/workflow.js";
import { getPendingTaskInfo } from "@/api/work.js";
import { parseTime, previewFileAppendPath } from "@/utils/index.js";
import { queryTaskCenterFileList } from "@/api/document";
export default {
  name: "myTask",
  computed: {
    ...mapGetters(["name", "id"]),
  },
  data() {
    return {
      taskIndex: 1,
      noticeIndex: 3,
      activeName: "first",
      listLoading: false,
      isShow: false,
      receivePagerList: [],
      penddingProcessList: [], // 审批待办任务
      hasProcessList: [], // 审批已办任务
      pendingTaskList: [], //待办任务
      handTaskList: [], //已办任务
      informationLetterList: [], //信息快报列表
      taskNum:undefined, //任务数量
      apprNum:undefined, //审批数量
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    previewFileAppendPath,
    fetchData() {
      // 请求待办任务
      TaskIng(this.id, "TK").then((res) => {
        this.pendingTaskList = this.formData(res.data.data, "createTime");
        this.taskNum = res.data && res.data.count
      });
      // 请求已办任务
      getHasApproves(this.id, "TK").then((res) => {
        this.handTaskList = this.formData(res.data.data, "createtime");
      });
      // 请求个人审批待办任务
      TaskIng(this.id, "SP").then((res) => {
        this.penddingProcessList = this.formData(res.data.data, "createTime");
        // this.receivePagerList = this.formData(res.data.data, 'createTime')
        this.apprNum = res.data && res.data.count
      });
      // 请求个人审批已办任务
      getHasApproves(this.id, "SP").then((res) => {
        this.hasProcessList = this.formData(res.data.data, "createtime");
      });
      // 请求个人签收任务
      getCandite(this.id).then((res) => {
        this.receivePagerList = this.formData(res.data.data, "createTime");
      });
      queryTaskCenterFileList({ is_msg: 1 }).then((res) => {
        this.informationLetterList = this.formData(
          res.data.results,
          "create_time"
        );
      });
      // // 请求待办任务
      // getPendingTaskInfo(this.id, 0).then(res => {
      //   this.pendingTaskList = this.formData(res.data.results, 'end_time')
      // })
      // // 请求已办任务
      // getPendingTaskInfo(this.id, 1).then(res => {
      //   this.handTaskList = this.formData(res.data.results, 'end_time')
      // })
    },
    formData(data = [], param) {
      data.forEach((e) => {
        const curTime = new Date(e[param]);
        const newTime = new Date(curTime.setHours(curTime.getHours()));
        e.time = parseTime(newTime, "{y}-{m}-{d} {h}:{i}");
      });
      return data;
    },
    // 跳转到处理公文页面
    // item.variables.bussinesskey, item.procInstId, item.procDefId, item.id
    linkToHandler(item, isHand = false) {
      const {
        variables,
        procInstId,
        procDefId,
        id,
        name,
        taskDefKey,
        description,
      } = item;
      const { businessKey, startUserId, approvalType } = variables;
      // 如果审批类型存在，跳转到上报审批
      if (approvalType) {
        this.$router.push({
          name: "ApprovalPager",
          params: {
            type: "handler",
            id,
            description,
            nodeName: name,
            proDefId: procDefId,
            proInsId: procInstId,
            targetId: businessKey,
            startUserId: startUserId || "",
            formKey: item.formKey || "",
            variables: item.variables,
            rejectKey: taskDefKey,
            isHand: isHand,
            approvalType
          },
        });
      } else {
        this.$router.push({
          name: "HandlerPager",
          params: {
            type: "handler",
            id: id,
            nodeName: name,
            proDefId: procDefId,
            proInsId: procInstId,
            targetId: businessKey,
            startUserId: startUserId || "",
            formKey: item.formKey,
            variables: item.variables,
            rejectKey: taskDefKey,
            isHand: isHand,
          },
        });
      }
    },
    // 跳转到已办审批
    linkToHasHandler(item) {
      const { businessKey, startUserId, approvalType } = item.variables;
      if (approvalType) {
        this.$router.push({
          name: "ApprovalPager",
          params: {
            type: "handler",
            id: null,
            proDefId: item.proDefId,
            proInsId: item.proInsId,
            targetId: businessKey,
            startUserId: startUserId || "",
            rejectKey: "",
            variables: item.variables,
            isHand: true,
            approvalType
          },
        });
      } else {
        this.$router.push({
          name: "HandlerPager",
          params: {
            type: "handler",
            id: null,
            proDefId: item.proDefId,
            proInsId: item.proInsId,
            targetId: businessKey,
            startUserId: startUserId || "",
            rejectKey: "",
            variables: item.variables,
            isHand: true,
          },
        });
      }
    },
    // 跳转到收文文页面
    linkToRecevie(item) {
      const { variables, procInstId, procDefId, id } = item;
      const { businessKey, rejectElemKey } = variables;
      this.$router.push({
        name: "HandlerPager",
        params: {
          type: "recevie",
          id: id,
          proDefId: procDefId,
          proInsId: procInstId,
          targetId: businessKey,
          variables: variables,
        },
      });
    },
    // 跳转到任务填报
    linkToReport(item) {
      const { variables, procInstId, procDefId, id, taskDefKey } = item;
      this.$router.push({
        name: "ReportTask",
        params: {
          id: id,
          proDefId: procDefId,
          proInsId: procInstId,
          targetId: variables.businessKey,
          variables: variables,
          rejectKey: taskDefKey,
        },
      });
      // this.$router.push({
      //   path: `/task-center/report/${taskId}?processId=${id}`
      // })
    },
    // 跳转到任务查看
    linkToPreview(item) {
      const { variables, proInsId, proDefId, id } = item;
      const { is_normal, businessKey } = variables;
      this.$router.push({
        name: "PreviewTask",
        params: {
          id: id,
          proDefId: proDefId,
          proInsId: proInsId,
          targetId: businessKey,
          variables: variables,
          isHand: true,
          showPager: is_normal ? false : true,
        },
      });
    },
    // 跳转到我的待办任务
    linkToPendingTask() {
      this.$router.push({
        name: "PendingTask",
      });
    },
    // 跳转到更多审批通知任务
    linkToApproveList() {
      this.$router.push({
        name: "ApproveList",
      });
    },
    //切换tab项
    toggleTaskStatus(index) {
      this.taskIndex = index;
    },
    toggleApprovalStatus(index) {
      this.noticeIndex = index;
    },
  },
};
</script>
<style lang="scss">
$primary: #fa412d;
.myTask-wraper {
  padding: 20px;
  @media only screen and (max-width: 500px) {
    .notice {
      width: 100% !important;
      float: none !important;
      padding: 0px !important;
      margin-bottom: 20px;
    }
  }
  .toggle-class {
    position: relative;
  }
  .toggle-class-copy {
    position: relative;
  }
  .notice {
    width: 50%;
    float: left;
    padding: 0 30px 30px 0;

    .header {
      display: flex;

      .tip {
        margin-right: 10px;
        padding: 20px 0;

        .title {
          font-size: 15px;
        }

        .suffix {
        }
      }

      .text {
        font-size: 14px;
        font-weight: bold;
      }

      span {
        font-weight: bold;
      }

      .more {
        color: $primary;
        margin-left: auto;
      }

      .el-button {
        padding: 20px 10px;
        font-size: 14px;
      }

      .toggleNums {
        position: absolute;
        top: 14px;
        left: 144px;
        color: #e6e6e6;
        background: #f14c4c;
        padding: 0 4px;
        border-radius: 26px;
        height: 15px;
        text-align: center;
        font-size: 12px;
        line-height: 15px;
      }
      .active {
        border-bottom: 1px solid;
        color: $primary;
      }
    }

    .main {
      font-size: 14px;

      .tip {
        margin-left: 10px;
      }

      .no-content {
        margin-top: 10px;
      }

      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
          padding: 8px 16px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #ececec;
        }
      }

      .content {
        display: flex;
        width: 62%;
        cursor: pointer;

        .textOverflow {
          width: 100%;
          display: inline-block;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          line-height: 24px;
          &:hover {
            color: $primary;
          }
        }
        .desc {
          margin-left: 4px;
        }
      }

      .date {
        line-height: 24px;
      }
    }
  }

  .notice:nth-child(even) {
    padding-right: 0;
  }

  .el-card {
    height: 320px;
  }

  .el-card__header {
    padding: 0 20px;
    // background:#eef7ff;
  }

  .el-card__body {
    padding: 0 10px;
  }

  .el-button--text {
    color: #000;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
}
</style>
